<template>
    <div>
        <page-main>
            <el-row style="padding: 0 20px;" :gutter="20">
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24">
                    <router-link to="/myWork/task">
                        <ColorfulCard header="工作任务" :num="17" tip="进行  12 完成 5" color="#5171fd"/>
                    </router-link>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24">
                    <router-link to="/examine/index">
                        <ColorfulCard color="rgb(254,192,61)" header="考核评定" :num="12323" tip="已评 6 待定 4 实习中 2%"/>
                    </router-link>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24">
                    <router-link to="/practice/template">
                        <ColorfulCard color="rgb(82, 193, 245)" header="实训模板" :num="123" tip="线上 12 线下 12"/>
                    </router-link>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24">
                    <router-link to="/teachingTrack/index">
                        <ColorfulCard color="rgb(251, 98, 96)" header="教学跟踪" :num="123" tip="进行 2 完成 5"/>
                    </router-link>
                </el-col>
                <el-col :lg="{span:'4-8'}" :md="8" :sm="12" :xs="24">
                    <router-link to="/graduateTrack/index">
                        <ColorfulCard color="rgb(129, 103, 245)" header="毕业跟踪" :num="123" tip="已反馈 10 实习中 15"/>
                    </router-link>
                </el-col>
            </el-row>
        </page-main>
        <page-main title="教学跟踪" title-other="默认：上一次选择的班级（组）">
            <div slot="title-left">
                <el-select v-model="trackSelect.value" placeholder="请选择">
                    <el-option
                        v-for="item in trackSelect.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    />
                </el-select>
            </div>
            <el-row :gutter="20">
                <el-col :md="12">
                    <el-card header="物理实习" shadow="hover" class="cube-card">
                        <div class="teaching-tracking-progress flex align-center">
                            <el-progress type="circle" :percentage="30"
                                         :format="(number)=>{
                                             return '完成度' + '\n' + number + '%'
                                         }"
                            />
                            <div class="flex justify-center flex-direction">
                                周期进度
                                <span>30</span>
                            </div>
                        </div>
                        <div class="teaching-tracking-progress">
                            <el-progress type="circle" :percentage="12"
                                         :format="(number)=>{
                                             return '完成度' + '\n' + number + '%'
                                         }"
                            />
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="12">
                    <div class="cube-card">
                        <table-pane :table-title-data="tableTitleData" :table-data="tableData" :config-flag="{
                            border:true
                        }"
                        >
                            <template slot="assessment" slot-scope="props" class="flex">
                                <el-progress :percentage="props.scope.row.assessment"
                                             :format="(percentage)=>{return percentage}"
                                />
                            </template>
                        </table-pane>
                    </div>
                </el-col>
            </el-row>
        </page-main>
        <page-main title="学情分析" title-other="默认：上一次选择的班级（组）">
            <div slot="title-left">
                <el-select v-model="trackSelect.value" placeholder="请选择">
                    <el-option
                        v-for="item in trackSelect.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    />
                </el-select>
            </div>
            <el-row :gutter="20">
                <el-col :md="12">
                    <div style="width: 100%; height: 550px;">
                        <radar-chart :indicator="chartData.indicator" :series="chartData.series"/>
                    </div>
                </el-col>
                <el-col :md="12">
                    <div class="analyze-table">
                        <table-pane :table-title-data="analyzeTable.title" :table-data="analyzeTable.list"
                                    :config-flag="{
                                        border:true
                                    }"
                        />
                        <el-button size="small">详情</el-button>
                    </div>
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import PageMain from '@/components/PageMain'
import TablePane from '@/components/tablePanel/table'
import RadarChart from '@/components/chart/radarChart'
import {randomMath} from '@/util'

export default {
    components: {RadarChart, TablePane, PageMain},
    data() {
        return {
            tableTitleData: [
                {
                    value: 'name',
                    label: '姓名',
                    width: '180'
                },
                {
                    value: 'cycle',
                    label: '周期进度',
                    width: '180'
                },
                {
                    value: 'assessment',
                    label: '考核进度',
                    slotName: 'assessment'
                }
            ],
            tableData: [
                {
                    name: '刘伯红',
                    cycle: 18,
                    assessment: 12
                },
                {
                    name: '伍德',
                    cycle: 12,
                    assessment: 50
                }
            ],
            trackSelect: {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶',
                    disabled: true
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '选项1'
            },
            chartData: {
                indicator: [],
                series: []
            },
            analyzeTable: {
                title: [
                    {
                        label: '姓名'
                    },
                    {
                        label: '教学设计'
                    },
                    {
                        label: '学科技能'
                    },
                    {
                        label: '教学研究'
                    },
                    {
                        label: '现代教育'
                    },
                    {
                        label: '书面表达'
                    },
                    {
                        label: '组织指导'
                    }
                ],
                list: []
            }
        }
    },
    computed: {
        titlePrefix() {
            let arr = []
            switch (this.type) {
                case 1:
                    arr = ['今天', '昨天']
                    break
                case 2:
                    arr = ['本周', '上周']
                    break
                case 3:
                    arr = ['本月', '上月']
                    break
                case 4:
                    arr = ['今年', '去年']
                    break
            }
            return arr
        }
    },
    mounted() {
        this.getChartData()
    },
    methods: {
        getChartData() {
            const indicator =
                [
                    {name: '书面及表达技能'},
                    {name: '现代教育技能'},
                    {name: '教学研究技能'},
                    {name: '说课拼课技能'},
                    {name: '学科教学技能'},
                    {name: '教学设计功能'},
                    {name: '组织和指导综合技能'}
                ]
            const series = []
            for (let i = 0; i < 6; i++) {
                series.push({
                    name: '王' + i,
                    value: [randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000)]
                })
            }
            this.chartData.series = series
            this.chartData.indicator = indicator
        },
        open(url) {
            window.open(url, 'top')
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-progress--circle .el-progress__text {
    white-space: pre-wrap;
    line-height: 25px;
}
@media only screen and (min-width: 768px) {
    .el-col-sm-4-8 {
        width: 20%;
    }
    .el-col-sm-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-sm-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-sm-push-4-8 {
        position: relative;
        left: 20%;
    }
}
@media only screen and (min-width: 992px) {
    .el-col-md-4-8 {
        width: 20%;
    }
    .el-col-md-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-md-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-md-push-4-8 {
        position: relative;
        left: 20%;
    }
}
@media only screen and (min-width: 1200px) {
    .el-col-lg-4-8 {
        width: 20%;
    }
    .el-col-lg-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-lg-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-lg-push-4-8 {
        position: relative;
        left: 20%;
    }
}
@media only screen and (min-width: 1920px) {
    .el-col-xl-4-8 {
        width: 20%;
    }
    .el-col-xl-offset-4-8 {
        margin-left: 20%;
    }
    .el-col-xl-pull-4-8 {
        position: relative;
        right: 20%;
    }
    .el-col-xl-push-4-8 {
        position: relative;
        left: 20%;
    }
}
.fa-info {
    padding: 10px 0 0;
    text-align: center;
    h1 {
        margin: 10px auto 20px;
    }
}
.question {
    .answer {
        margin: 20px 0 0;
        padding-left: 20px;
        font-size: 14px;
        color: #aaa;
        li {
            margin-bottom: 10px;
            line-height: 1.5;
            &:last-child {
                margin-bottom: 0;
            }
        }
        span {
            color: #666;
            font-weight: bold;
        }
    }
}
.icon-box {
    padding: 20px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    transition: 0.2s;
    &:hover {
        color: #fff;
    }
    &-1 {
        color: #ffc069;
        &:hover {
            background-color: #ffc069;
        }
    }
    &-2 {
        color: #b37feb;
        &:hover {
            background-color: #b37feb;
        }
    }
    &-3 {
        color: #95de64;
        &:hover {
            background-color: #95de64;
        }
    }
    &-4 {
        color: #ff85c0;
        &:hover {
            background-color: #ff85c0;
        }
    }
    &-5 {
        color: #ff9c6e;
        &:hover {
            background-color: #ff9c6e;
        }
    }
    &-6 {
        color: #282c34;
        &:hover {
            background-color: #282c34;
        }
    }
    i {
        font-size: 24px;
    }
    .title {
        margin-top: 5px;
        font-size: 14px;
    }
}
.cube-card {
    ::v-deep .el-col {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-select {
            width: 120px;
        }
    }
    .today,
    .yesterday,
    .contrast {
        font-size: 24px;
        line-height: 30px;
    }
    .today {
        font-weight: bold;
        color: #9d8254;
    }
    .yesterday {
        color: #666;
    }
    .contrast::after {
        content: '%';
    }
    .sub-title {
        font-size: 12px;
        line-height: 18px;
        color: #98a4b0;
    }
}
.teaching-tracking-progress {
    margin-left: 30px;
    margin-bottom: 15px;
    .flex {
        font-size: 18px;
        margin-left: 20px;
        color: #999;
        line-height: 30px;
        span {
            color: #666;
            font-weight: bold;
            font-size: 22px;
        }
    }
}
.analyze-table {
    position: relative;
    button {
        position: absolute;
        right: 0;
        margin-top: 12px;
    }
}
</style>
